<template>
  <div v-if="classData">
    <!-- 顶部 -->
    <van-nav-bar fixed placeholder title="团课详情" left-text="" right-text="" left-arrow @click-left="onClickLeft" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" height="220px" class="swipe">
      <van-swipe-item>
        <img :src="classData.class_details_img_1" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="classData.class_details_img_2" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!--轮播图下面的  -->
    <div>
      <div class="btn1">
        <van-button class="js" type="primary" size="mini" color="#FEC400">团课</van-button>
        <p>{{ classData.class_name }}</p>
      </div>
    </div>
    <div class="btn2">
      <span style="color: #3478f7; font-size: 23px; font-weight: bold">￥{{ classData.class_price }}</span>
      <span style="color: gray">元/次 </span>
      <span style="color: gray; text-decoration: line-through"> ￥{{ Number(classData.class_price) * 2 }}</span>
      <van-button class="js" round type="info" size="mini" color="#FEC400">{{ classData.class_tag }}</van-button>
    </div>
    <!-- 标签 -->
    <van-tabs>
      <!-- 详情 -->
      <van-tab title="详情">
        <div class="details">
          <div class="car1">
            <h3>教练详情</h3>
            <!-- style="padding: 5px; height: 160px"  -->
            <img :src="classData.coach_img" alt="" />
            <!--<p>全国十佳明星教练</p>-->
            <p>{{ classData.coach_introduce }}</p>
            <!--<p>竞技健美操国家一级运动员</p>-->
            <!--<p>2017年亚洲健美锦标赛冠军</p>-->
            <!--<p>2016年全国健美健身公开赛冠军</p>-->
          </div>
          <div class="car1">
            <h3>课程介绍:</h3>
            <p>{{ classData.class_introduce }}</p>
          </div>
          <div class="car1_1">
            <h4>注意事项:</h4>
            <p>{{ classData.class_notice }}</p>
            <img @click="lookImg(classData.calss_img_1)" :src="classData.calss_img_1" alt="" />
          </div>
          <div class="car1_1">
            <h4>适宜人群:</h4>
            <p>{{ classData.class_people }}</p>
            <img @click="lookImg(classData.calss_img_2)" :src="classData.calss_img_2" alt="" />
          </div>
          <div class="car1_1">
            <h4>训练强度:</h4>
            <p>{{ classData.class_strength }}</p>
            <img @click="lookImg(classData.calss_img_3)" :src="classData.calss_img_3" alt="" />
          </div>
          <div class="car1_1">
            <h4>所需工具:</h4>
            <p>{{ classData.class_tool }}</p>
            <img @click="lookImg(classData.class_img)" :src="classData.class_img" alt="" />
          </div>
        </div>
      </van-tab>
      <!-- 支持会员卡 -->
      <van-tab title="支持会员卡">
        <div class="card" @click="goMembership">
          <h3>支持会员卡</h3>
          <div class="card1">
            <div class="card1_1">
              <p style="font-size: 20px">健身卡2次体验</p>
              <p>支持场馆:全部场馆</p>
              <p>储值类型</p>
              <p>本次可抵扣:100元</p>
            </div>
            <div class="cardAN">
              <van-button to="Membership_card_details" style="background: #648ae9; color: white; border: none" class="btn">购买会员卡</van-button>
            </div>
          </div>
          <div class="card1" style="background-image: linear-gradient(to right, rgb(81, 119, 209), #1dd1d4d0)" @click="goMembership">
            <div class="card1_1">
              <p style="font-size: 20px">健身黄金卡</p>
              <p>支持场馆:全部场馆</p>
              <p>次卡类型</p>
              <p>本次可抵扣:1次</p>
            </div>
            <div class="cardAN">
              <van-button type="danger" class="btn" style="background: #4d99d4; color: white; border: none">购买会员卡</van-button>
            </div>
          </div>
          <div class="card1" style="background-image: linear-gradient(to right, #3aceef, rgba(77, 110, 240, 0.599))" @click="goMembership">
            <!-- background-image: linear-gradient(to right, #8a68fb, #66cbff) -->
            <div class="card1_1">
              <p style="font-size: 20px">健身卡2次体验</p>
              <p>支持场馆:全部场馆</p>
              <p>期限类型</p>
              <p>本次可抵扣:1次</p>
            </div>
            <div class="cardAN">
              <van-button style="background: #7b92fd; color: white; border: none" class="btn">购买会员卡</van-button>
            </div>
          </div>
        </div>
        <!-- <van-card /> -->
      </van-tab>
      <!-- 评论 -->
      <van-tab title="评论" v-if="commentData" :badge="commentData.length">
        <!-- 评论上半部分 -->
        <div class="comment">
          <h3>用户评论</h3>
          <div v-for="item in commentData" :key="item.class_id">
            <div class="piao">
              <div class="comment_1">
                <van-image width="40" height="40" round :src="item.u_img" />
                <div>
                  <!-- 评论网名 -->
                  <p style="font-size: 15px">{{ item.u_nickname }}</p>
                  <!-- 发布时间 -->
                  <p style="color: gray; font-size: 12px">{{ item.class_detail_date }}</p>
                </div>
              </div>
              <div class="tag" @click="good(item.class_detail_id, item.likeNum)">
                <van-icon name="good-job-o" />
                {{ item.likeNum }}
              </div>
            </div>
            <!-- 评论加图片部分 -->
            <div class="pinglun">
              <!-- 评论发表的内容 -->
              <p style="font-size: 13px">{{ item.class_content }}</p>
              <!--<van-grid :border="false" :column-num="3">-->
              <!--  <van-grid-item>-->
              <!--    <van-image @click="lookImg(item.class_detail_img)" :src="item.class_detail_img" />-->
              <!--  </van-grid-item>-->
              <!--</van-grid>-->
            </div>
          </div>
        </div>
        <div>
          <van-sticky :offset-top="100">
            <van-button class="comment_an" round type="info" show-cancel-button @click="show = true">评论</van-button>
          </van-sticky>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 评论按钮弹出的框 -->
    <van-dialog @confirm="commit" v-model="show" title="评论" show-cancel-button class="kuang" style="font-size: 15px">
      <van-rate v-model="xing" />
      <p>好评推荐下载</p>
      <van-field v-model="val" class="tanchuang" rows="2" type="textarea" placeholder="请输入评论" show-word-limit />
      <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
    </van-dialog>
    <van-overlay :show="showOver" @click="showOver = false">
      <div class="wrapper">
        <div class="block">
          <canvas id="canvas"></canvas>
        </div>
      </div>
    </van-overlay>
    <!-- 底部导航栏 -->
    <van-tabbar fixed placeholder style="margin-top: 20px">
      <van-tabbar-item icon="phone-o" @click="upPhone">联系教练</van-tabbar-item>
      <van-tabbar-item icon="share-o">
        <van-cell title="分享课程" @click="showShare = true" />
        <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
      </van-tabbar-item>
      <router-link :to="{ path: '/About_class/' + zid }">
        <van-button type="info" style="width: 200px">立即预约</van-button>
      </router-link>
    </van-tabbar>
  </div>
</template>
<script>
// import { addCommit, classDetail, commentDetail } from '../http/api'
import { ImagePreview, Notify, Toast } from 'vant'
import { addCommit, classDetail, commentDetail, goodCommit } from '../http/api'
import QRCode from 'qrcode'
import qs from 'qs'

export default {
  inject: ['reload'],
  props: ['zid'],
  data() {
    return {
      // 分享下部菜单
      showShare: false,
      // 写评论弹出框
      show: false,
      // 分享栏类型数据
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '二维码', icon: 'qrcode' }
      ],
      // 课程详情数据
      classData: null,
      // 评论区数据
      commentData: null,
      time: null,
      showOver: false,
      xing: 3,
      val: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/leisureclass/1')
    },
    onSelect(option) {
      // 获取当前页面地址，如http://localhost:8080/admin/index
      let wPath = window.document.location.href
      if (option.name === '复制链接') {
        if (window.clipboardData) window.clipboardData.setData('text', wPath)
        else {
          ;(function () {
            document.oncopy = function (e) {
              e.clipboardData.setData('text', wPath)
              e.preventDefault()
              document.oncopy = null
            }
          })(wPath)
          document.execCommand('Copy')
        }
        Toast('已复制链接到剪切板')
      } else if (option.name === '二维码') {
        this.showOver = true
        let canvas = document.querySelector('#canvas')
        // 调用函数去生成二维码，参数依次为：二维码的容器、要生成的内容、回调函数
        QRCode.toCanvas(canvas, wPath, function (error) {
          if (error) Toast('出错啦！')
        })
      } else if (option.name === '微博') {
        // shareUrl是微博的分享地址，（有资料说需要真实的appkey，必选参数，这里我没用appkey也可以正常分享）
        let _shareUrl = 'http://service.weibo.com/share/share.php?'
        _shareUrl += 'url=' + encodeURIComponent(wPath) // 参数url设置分享的内容链接
        _shareUrl += '&title=' + encodeURIComponent(this.classData.class_name) // 参数title设置分享的标题
        // 保留当前页面,打开一个非tab页面（按需求来，可以新开标签页，也可以在当前页新开页面）
        window.open(_shareUrl, '_blank', 'height=100, width=400', 'scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes')
      } else if (option.name === '微信') {
        if (window.clipboardData) window.clipboardData.setData('text', wPath)
        else {
          ;(function () {
            document.oncopy = function (e) {
              e.clipboardData.setData('text', wPath)
              e.preventDefault()
              document.oncopy = null
            }
          })(wPath)
          document.execCommand('Copy')
        }
        Toast('已复制链接到剪切板')
      }
      this.showShare = false
    },
    // 获取课程详情
    classDetails() {
      classDetail({ zid: this.zid }).then((res) => {
        this.classData = res.data.data[0]
      })
    },
    // 获取评论区内容
    commentDetail() {
      commentDetail({ zid: this.zid }).then((res) => {
        this.commentData = res.data.data
        this.showTime()
        for (let key in res.data.data) {
          const timeData = this.getDistanceDays(res.data.data[key].class_detail_date, this.time)
          if (timeData > 0) this.commentData[key].class_detail_date = timeData + '天前'
          else this.commentData[key].class_detail_date = '今天发布'
        }
      })
    },
    // 照片预览
    lookImg(val) {
      ImagePreview([val])
    },
    // 跳转会员卡详情
    goMembership() {
      this.$router.push(`/membership_card_details/${this.gid}`)
    },
    // 指定时间转换为时间戳
    toTimeStamp(dateString) {
      return new Date(dateString) - 0
    },
    // 获取当前日期：YYYY-MM-DD
    showTime() {
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      month = month < 10 ? (month = '0' + month) : month
      this.time = year + '-' + month + '-' + date
    },
    // 计算两个日期距离的天数
    getDistanceDays(date1, date2) {
      const data1 = this.toTimeStamp(date1)
      const data2 = this.toTimeStamp(date2)
      let max = ''
      let min = ''
      if (data1 > data2) {
        max = data1
        min = data2
      } else {
        max = data2
        min = data1
      }
      return (max - min) / (24 * 60 * 60 * 1000)
    },
    upPhone() {
      let phone = this.classData.coach_phone
      if (window.clipboardData) window.clipboardData.setData('text', phone)
      else {
        ;(function () {
          document.oncopy = function (e) {
            e.clipboardData.setData('text', phone)
            e.preventDefault()
            document.oncopy = null
          }
        })(phone)
        document.execCommand('Copy')
      }
      Toast('已复制链接到剪切板')
    },
    commit() {
      let user = JSON.parse(localStorage.getItem('user'))
      let data = {
        class_id: this.gid,
        class_content: this.val,
        class_detail_date: this.time,
        commit_star: this.xing,
        user_id: user.u_id,
        nick_name: user.u_nickname
      }
      addCommit(qs.stringify(data)).then((res) => {
        this.reload()
        Notify(res.msg)
      })
    },
    good(id, num) {
      let data = {
        class_detail_id: id,
        commit_star: Number(num) + 1
      }
      goodCommit(qs.stringify(data)).then((res) => {
        this.reload()
        Notify(res.msg)
      })
    }
  },
  mounted() {
    this.classDetails()
    this.commentDetail()
    this.gid = this.$route.path.split('/').pop()
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

/* 轮播图 */
.van-swipe-item > img {
  display: block;
  margin: 0 auto;
  width: 345px;
  height: 220px;
}

/* 详情的--------------------------------- */
.btn1 {
  margin: 10px;
  display: flex;
}

p {
  margin: 3px 0 3px 10px;
}

.btn2 {
  margin: 10px;
}

.js {
  padding: 5px;
  vertical-align: middle;
  float: right;
}

.details {
  margin: 10px 50px 0 15px;
}

/* 图片的 */
img {
  padding: 5px;
  /* padding: 20px 100px 20px 100px; */
  width: 120px;
  height: 120px;
}

.car1 {
  margin-bottom: 30px;
}

.car1 > h3 {
  border-left: 2px solid #3478f7;
  padding-left: 4px;
}

/* 详情 */
.car1_1 {
  width: 330px;
  margin: 0 auto;
  color: rgb(39, 39, 39);
}

/* 详情卡片的设置 */
.car1_1 > img {
  width: 200px;
  height: 150px;
  padding: 10px 50px;
}

.loading {
  display: inline-block;
  margin: 5px 0 30px 150px;
}

/* 支持会员卡 --------------------------------------- */
.card > h3 {
  margin: 10px;
}

.card1 {
  width: 340px;
  height: 150px;
  background-image: linear-gradient(to right, #2f50f6f5, #4a9abf90);
  /* background-image: linear-gradient(to right, #f5cdc6, #f7e8e5); */
  border-radius: 15px;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
  color: white;
}

.card1 > .card1_1 {
  color: white;
  /* padding: 3px 3px 0px 5px; */
  /* margin: 3px 0 0 7px; */
  font-size: 15px;
  display: flex;
  /* 卡内垂直居中显示 */
  justify-content: center;
  flex-direction: column;
  align-content: center;
}

.cardAN {
  /* width: 100px; */
  line-height: 30px;
  /* background: #3478f7; */
  display: flex;
  vertical-align: middle;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cardAN > .btn {
  width: 100px;
  border-radius: 5px;
}

/*评论的样式---------------------------------------------------------- */
.comment {
  margin: 10px 20px 0 15px;
}

.comment > h3 {
  margin: 10px;
}

.comment_1 {
  display: flex;
}

/* 用户评论标签的设置 */
.tag {
  display: flex;
  margin-left: 55%;
  justify-content: right;
  align-items: center;
}

.piao {
  display: flex;
}

/* 评论标签样式 */
.tag1,
.tag2 {
  width: 60px;
  height: 20px;
  border-radius: 7px;
  padding: 3px;
  display: flex;
  vertical-align: middle;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tag2 {
  margin-left: 3px;
}

/* 评论下半部分 */
.pinglun {
  margin: 5px 0 0 25px;
  /* background: pink; */
  width: 280px;
  height: 50px;
}
/* 评论按钮 --------------*/
.comment_an {
  display: block;
  width: 150px;
  height: 35px;
  background: #b1cfe2;
  border: none;
  /* margin-bottom: 0px; */
  margin: 0px auto;
}
/* 评论弹窗的样式 */
.tanchuang {
  width: 240px;
  height: 160px;
  border-radius: 8px;
  border: 1px solid gray;
  margin: 20px auto;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.kuang {
  width: 300px;
  height: 400px;
}
/* p标签文字 */
.van-dialog__content > p {
  margin: 5px 0 10px 0;
}
.van-dialog__content > p {
  padding: 10px 0 0px 0;
  text-align: center;
}
.van-dialog__content > .van-rate {
  margin: 10px 90px 0;
}
/* .van-cell__value .van-field__value {
  width: 250px;
} */
</style>
<style>
/* 滑动下划线 */
.van-tabs__line {
  background-color: gray;
  width: 110px;
  height: 1px;
}
</style>
